<script setup lang="ts">
import { ref } from 'vue'
import ChildOne from './components/ChildOne.vue'

const money = ref(1000)
const car = ref('自行车')
const house = ref('奋斗者之家')

const options = [
  { label: '男', value: 1 },
  { label: '女', value: 0 }
]

const options1 = [
  { label: '一周内', value: 1 },
  { label: '一月内', value: 2 },
  { label: '半年内', value: 3 },
  { label: '大于半年', value: 4 }
]

const gender = ref(1)
const time = ref(4)
</script>

<template>
  <div class="article-page">
    <!-- <ChildOne
      :model-value="money"
      @update:model-value="money = $event"
    ></ChildOne> -->
    <!-- 使用 v-model 语法糖简化写法 -->
    <!-- <ChildOne v-model="money"></ChildOne> -->

    <!-- <ChildOne v-model="money" :car="car" @update:car="car = $event"></ChildOne> -->
    <!-- 使用语法糖 -->
    <!-- <ChildOne v-model="money" v-model:car="car"></ChildOne> -->

    <ChildOne
      v-model="money"
      v-model:car="car"
      v-model:house="house"
    ></ChildOne>

    <p>------------------------------</p>

    <!-- <CpRadioBtn
      :options="options"
      :model-value="gender"
      @update:model-value="gender = $event"
    ></CpRadioBtn> -->

    <CpRadioBtn :options="options" v-model="gender"></CpRadioBtn>

    <p>-------------------------------</p>
    <!-- <CpRadioBtn
      :options="options1"
      :model-value="time"
      @update:model-value="time = $event"
    ></CpRadioBtn> -->
    <CpRadioBtn :options="options1" v-model="time"></CpRadioBtn>
  </div>
</template>

<style lang="scss" scoped></style>
